@charset "utf-8";
@function r($px){
    @return ($px/40)*1rem;
}
@function px($px){
    @return ($px/2)*1px;
}
.fl{
    float:left;
}
.fr{
    float:right;
}
//头部导航开始
.navbar{
    width:100%;
    height:50px;
    background: #222222;
    border:none;
    border-radius: 0;
    box-sizing: border-box;
    margin-bottom:0;
    position:fixed;
    z-index: 999;
    top:0;
    
    
    .active{
        background: #080808;
    }
    //logo部分开始
    .navbar-header{       
        .navbar-brand{
            line-height: 50px;
            img{
                 display:inline-block;
            }          
            padding-top:0;
            padding-bottom:0;
        }
    }
    //logo部分开始
    #navbar .navbar-nav select{
       font-size: 14px;
       border:0;
       background:  #222222;
       color: #9d9d9d;
       width: 108px;
       height:50px;
       outline: none;
       cursor: pointer;
       text-align: center;
       font-weight:bold; 
       &:hover{
           color: white;
       }
       option{
           outline: none;
           background: white;
           color:black;
           border:none;
           &:hover{
               background: black;
           }
       }  
    }
    #navbar .navbar-nav > li > a {
        color: #9d9d9d;
        &:hover{
            color:white;
            background: none;
        }
    }
    .navbar-nav > .active > a{
        background: #080808;
        
    }
}

//头部导航结束

//LayaFlash引擎部分开始
.LayaFlash{
    width:100%;
    padding-top:r(55);
    background: #fbfaf7;
    .flash-top{
        >h2{
            font-size:r(47);
            color:#0078d7;
        }
        >p{
            font-size: r(30);
            color:#666666;
            margin-bottom:r(35);
        }
    }
    .flash-content{
        margin-bottom:r(30);
        h3{
            margin:0;
            font-size: 19px;
            color:#333333;
            margin-bottom:r(7);          
        }
        p{
            font-size: 14px;
            color:#666666;           
        }
        .img-transform{
            >a>img{
                transition: all 1s;
                
            }
            >a>img:hover{
                transform: rotateZ(360deg);
                opacity: 0.5;
            }
        }
    }
    .flash-right{
        img{
            width:r(182);
            height:r(232);
            margin-top:r(30);
        }
    }
}

//LayaFlash引擎部分结束

//LayaBox优势部分开始
.LayaBox{
    width:100%;
    padding-top:r(55);
    padding-bottom:r(55);
    
    .layabox-left{
        img{
            width:r(151);
            height:r(147);
            margin-top:r(120);
        }
    }
    .layabox-content{
        >div{
            margin-bottom:r(10);
        }
        >h2{
            color:#8fc31f;
            font-size: r(48);
        }
        p{
            font-size: 14px;
            color:#666666;
            margin-top:r(10);
            margin-left:r(12);
        }
    }
    
}
//LayaBox优势部分结束

//LayaBox产品家族部分开始
.LayaBox-product{
    padding-top:r(55);
    padding-bottom:r(55);
    background: #0079d7;

    h2{
        text-align: center;
        font-size: r(48);
        color:#fffefe;
        margin-bottom:r(30);
    }
    .product-content{
        margin-bottom:r(30);
        height:r(117);
        h3{
            margin:0;
            font-size: r(28);
            color:#fffefe;
            margin-bottom:r(7);
            
        }
        p{
            font-size: r(20);
            color:#fffefe;
        }
    }
}
//LayaBox产品家族部分结束

//LayaBox游戏部分开始
.LayaBox-game{
    padding-top:r(55);
    h3{
        margin:0;
        font-size: r(40);
        font-weight: bold;
    }
    p{
        font-size: r(24);
        cursor: pointer;
    }
    .big-game{
        img{
            width:100%;
            margin-top:r(10);
            margin-bottom:r(30);
            cursor: pointer;
            
        }      
    }
    .small-game{
        >div img:hover{
            opacity:0.8;
        }
       
        p{
           width:67px;
           font-size: r(24);
           text-align: center;
            
        }
    }

}
//LayaBox游戏部分结束

//轮播图部分开始
#myCarousel{
    margin-top:50px;
}
//轮播图部分结束

//精彩游戏部分结束
.cooperation{
    padding-top:r(15);
    padding-bottom:r(15);
    background: #f4f4f4;
    h3{
        font-size: r(30);
        margin-bottom:r(15);
        span{
            font-size: r(12);
        }
    }
    .cooperation-box{
        >div{
            img:hover{
                opacity: 0.8;
            }
            margin-bottom:r(20);
            
        }
    }
}
         
//合作伙伴部分开始

//底部部分开始
footer{
    padding-top:r(10);
    padding-bottom:r(10);
    background: #3b3b3b;
    img{
        cursor: pointer;
    }
    .footer-left{
        margin-top:r(20);
        span{
            font-size: r(14);
            color:#a1a3ab;
        }
        p{
            font-size: r(12);
            color:#a1a3ab;
        }
    }
    .footer-right{
        margin-top:r(20);
        img{
            margin-left:r(10);
        }
        .wx{
            position:relative;
            .er{
                position:absolute;
                top:-160px;
                left:7px;
                display:none;
                
            }
        }
        
    }
    
    
}

//底部部分结束

@media screen and (min-width:320px)and(max-width:485px){
    //调整轮播图位置   
    .carousel-indicators{
        bottom:-6px;
    }
}
@media screen and (min-width:970px){
    //调整flash部分的相关元素
    .LayaFlash .flash-content h3{
        margin-bottom:r(5);
    }
    .LayaFlash .flash-top{
        >h2{
            font-size:r(27);
        }
        >p{
            font-size: r(20);
        }         
    }   
    //调整LayaBox部分的相关元素
    .LayaBox .layabox-content{
        >h2{
           font-size:r(27); 
        }
    }
    .LayaBox-product{
        h2{
           font-size:r(27);  
        }
    }
    //调整LayaBox-game部分的相关元素
    .LayaBox-game{
        h3{
            font-size:r(27); 
        }
        p{
            font-size: r(14);
        }
        .small-game{
            margin-top:17px;
            p{
                width:67px;
                font-size:14px;
            }
        }
    }
    //调整cooperation部分的相关元素
    .cooperation{
    h3{
            font-size: r(20);
            span{
                font-size: r(12);
            }
        }
    }
    //调整footer部分的相关元素
    footer{
        .footer-left{
            margin-top:15px;
            span{font-size: 14px;}
            p{font-size: 12px;}
        }
        .footer-right{
            margin-top:15px;
        }
    }
    
    
}
@media screen and (max-width:994px){
    //在设定宽度下隐藏右边phone部分
   .flash-right{
       display: none;
   }

}
@media screen and (max-width:767px){
    //在设定宽度下隐藏右边phone部分
   .layabox-left{
       display: none;

   }
   
   //设置手机端时导航条的样式
   .navbar-nav{
       margin-top:-5px;
       margin-bottom:0;
       background: #222222;
       
   }

}
@media screen and (min-width:992px){
    //在大屏下设置图片的距离
    .LayaBox{
        .layabox-left{
            img{
                margin-top:r(60);
            }
        }
    }
    
    
    
    
}
@media screen and (min-width:768px) and (max-width:992px){
    //在大屏下设置图片的距离
    .LayaBox-game{
        .big-game{
            margin-top:30px;
        }
        .small-game{
            margin-top:10px;
            p{
                font-size:14px;
            }
        }
    }
    //设置尾部二维码的位置
    footer{
        .footer-right{
            .wx{
                .er{
                 top:-160px;
                    left:0px;
                 }
            }        
        }                
    }     
}
@media screen and (max-width:768px){
    //设置尾部二维码的位置
    footer{
        .footer-right{
            margin-top:20px;
            .wx{
                .er{
                 top:-160px;
                    left:-5px;
                 }
            }        
        }                
    }
}
@media screen and (min-width:768px){
    //调整LayaBox-product的高度
    .LayaBox-product{
        .product-content{
            height:107px;
        }
    }
    //LayaBox产品家族部分开始
    .LayaBox-product{
        .product-content{
            h3{
                margin:0;
                font-size: 24px;
                color:#fffefe;
                margin-bottom:r(7);
                
            }
            p{
                font-size: 12px;
                color:#fffefe;
            }
        }
    }
    //LayaBox产品家族部分结束
}
